React: Material

React で Material-UI を使う設定方法を記します。記事の最後にはサンプルも用意しています。

Material-UI は、React 向けの UI コンポーネントライブラリです。Material Design をベースにした UI コンポーネント群が提供されています。その他にも、テーマやレイアウトシステムなどの、UI 開発に便利な仕組みも提供しています。

まずは、React アプリケーションを作成します。TypeScript で開発をすることを前提とするため、template オプションに "typescript" を指定しています。

※ npx が認識されずにコマンドがエラーになる場合、Node.js のインストールが必要です。Node.js のインストールはこちらに手順がありますので参照ください。

Node.js のインストール方法（及びバージョン確認）

Node.js のインストール方法を紹介します。ここでは Windows でのインストール方法を紹介します。 インストーラーのダウンロード Node.js 本家のウェブサイトから、インストーラーをダウ ...

アプリケーションのルートディレクトリ（フォルダ）で、次のコマンドを実行します。

続いて、public\index.html に次のコード 3-18 行目（ハイライト部分）を追加します。

では、Material-UI で提供されている Button コンポーネントを利用してみましょう。App.tsx 4 行目で、"@mui/materil" から Button をインポートして利用します。

また、App.tsx 3 行目にあるスタイルのインポートをコメントアウトしていることと、header タグ内の記述は Button 以外は削除します。